<template>
	<div>
		<Table :columns="columns" :data="[pointConfig]" />
	</div>
</template>
<script>
import { TableColumns } from '@/components/TableContainer'
import Table from '@/components/Table'
import { rebateRender } from './utils'
export default {
	components: {
		Table
	},
	props: {
		value: {
			type: Object,
			default: () => ({})
		},
		isEdit: {
			type: Boolean,
			default: false
		},
		platformFlag: {
			type: Number,
			default: () => 0
		},
		checkMax: {
			type: Function,
			default: undefined
		},
		commissionModel: {
			type: Number,
			default: 1
		}
	},
	data() {
		const headerRender = (label, tips, subLable) => {
			const _subLable = subLable || (this.commissionModel === 1 ? '团队返点' : '个人返水')
			return (
				<div class='header'>
					{label}
					<p>
						{_subLable}
					</p>

					{(this.commissionModel === 1 && tips) && (
						<el-tooltip content={`${label}${_subLable}：${tips}`} placement='top-start' effect='dark'>
							<i class='el-icon-question' />
						</el-tooltip>
					)}
				</div>
			)
		}
		const rule = {
			validator: (rule, val, callback) => {
				const field = rule['field']
				if (!val && val !== 0) {
					return callback(new Error(`不能为空`))
				}
				const err = this.checkMax(field, val)
				if (err) {
					return callback(new Error(err))
				}
				return callback()
			},
			trigger: 'blur'
		}

		const editPointRender = ({ row, column }) => {
			const prop = column.property
			const val = this.value[prop]
			return (
				<el-form-item
					rules={rule}
					prop={`rebateRateList.${this.platformFlag}.${prop}`}
				>
					<div class='edit-number'>
						<el-input-number
							precision={3}
							controls={false}
							min={0}
							placeholder={val?.toString?.() || '0.000'}
							value={this.value[prop]}
							onChange={(newVal) =>
								this.handleItemChange(prop, newVal)
							}
						/>
						<span>&nbsp;%</span>
					</div>
				</el-form-item>
			)
		}

		return {
			columns: [
				TableColumns.edit({
					minWidth: '120',
					prop: 'texasRebate',
					header: () => headerRender('德州-俱乐部', this.$t('agent.texasRebate_tips')),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					isShow: () => {
						if (this.platformFlag === 1) {
							return false
						}
					},
					prop: 'texasInsuranceRebate',
					header: () => headerRender('德州-保险', this.$t('agent.texasInsuranceRebate_tips'), '团队分成'),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					prop: 'actualPersonRebate',
					header: () => headerRender('真人'),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					prop: 'sportsRebate',
					header: () => headerRender('体育'),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					prop: 'lotteryTicketRebate',
					header: () => headerRender('彩票'),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					prop: 'chessRebate',
					header: () => headerRender('棋牌'),
					editRender: editPointRender,
					customRender: rebateRender
				}),
				TableColumns.edit({
					minWidth: '120',
					prop: 'esportsRebate',
					header: () => headerRender('电竞'),
					editRender: editPointRender,
					customRender: rebateRender
				})
			]
		}
	},
	computed: {
		pointConfig() {
			return {
				isEdit: this.isEdit,
				...this.value
			}
		}
	},
	methods: {
		async queryLimit() {
			const res = await this.$api.rebateRateQueryLimit()
			if (res.code === 200) {
				this.maxRebateLimit = res.data
			}
		},
		handleItemChange(prop, newVal) {
			this.$emit(
				'input',
				Object.assign({}, this.value, {
					[prop]: newVal
				})
			)
		}
	}
}
</script>

<style scoped lang="scss">

::v-deep .edit-number .el-input-number {
	width: auto;
}
::v-deep .edit-number .el-input input {
	width: 80px;
}

.header{
	position: relative;

	.el-icon-question{
		position: absolute;
		font-size: 12px;
		top: 25px;
		right: 5px;
		cursor: pointer;
		&:after{
			font-size: 17px;
		}
	}
}
</style>
